﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Map View.aspx.cs" Inherits="Webtest_view.Map_View" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();

    function InitializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions =
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directionpanel'));

        var control = document.getElementById('control');
        control.style.display = 'block';


    }



    function calcRoute() {

        var start = document.getElementById('startvalue').value;
        var end = document.getElementById('endvalue').value;
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

    }



    function Button1_onclick() {
        calcRoute();
    }

    window.onload = InitializeMap;
    </script>

<style type="text/css">
        .style1
        {
            text-align: center;
        }
        .style2
        {
            text-align: right;
            color: #FFFF00;
        }
        .style3
        {
            text-align: right;
        }
    </style>
    <title>Map View</title>
</head>
<body style="background-color :Lime">
    <form id="form1" runat="server">
     <div style="top: 86px; left: 23px; position: absolute; height: 484px; width: 1037px ;background-color:Fuchsia">

 <table id ="control">
<tr>
<td>
<table>
<tr>
<td style="color: #00FFFF">From:</td>
<td>
    <input id="startvalue" type="text" style="width: 305px" value="Malabe" /></td>
</tr>
<tr>
<td style="color: #00FFFF">To:</td>
<td><input id="endvalue" type="text" style="width: 301px" value="Athurugiriya" /></td>
</tr>
<tr>
<td align ="right">
    <input id="Button1" type="button" value="GetDirections" onclick="return Button1_onclick()" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign ="top">
<div id ="directionpanel"  style="height: 390px;overflow: auto; color: #99FF99;" >
    <div class="style3"
        style="top: -8px; left: 862px; position: absolute; height: 19px; width: 434px">
        Click on Satelite View</div>
    </div>
</td>
<td valign ="top">
<div id ="map"
        style="height: 595px; width: 845px; top: 21px; left: 454px; position: absolute;"></div>
</td>
</tr>
</table>
    </div>
    </form>
    <div class="style1" 
        style="top: 23px; left: 19px; position: absolute; height: 61px; width: 1303px">
        Test Map Tool</div>
    <div class="style2"
        style="top: 742px; left: 290px; position: absolute; height: 19px; width: 1037px">
        Developed by Isanka Thalagala</div>
</body>
</html>
